<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="shortcut icon"  th:href="@{/static/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script>
        var screenWidth = document.documentElement.clientWidth;
        layui.use(['table','laydate'], function(){
            var table = layui.table,
                laydate = layui.laydate;

            laydate.render({
                elem: '#begin-date'

            });
            laydate.render({
                elem: '#end-date'

            });

            table.render({
                id:'tableAll'
                ,elem: '#test'//绑定表格
                //数据来源
                ,url:'/approve/getMyApplications'//绑定数据来源
                ,toolbar: '#toolbarDemo'//绑定三个按钮
                ,title: '我的出差申请表'
                ,page: true
                ,width:screenWidth
                ,cellMinWidth:60
                ,defaultToolbar: []//筛选，打印，导出（之后会删掉）'filter', 'print', 'exports'
                ,where : {
                    supplierName :'',
                    node : '',
                    planTravelDate : '',
                    beginTime:'',
                    endTime:''
                }
                ,cols: [
                    [
                        {field:'numbering', title:'编号',  fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                        ,{field:'addTime', title:'申请日期',  edit: 'text', sort: true,templet:'<div>{{ layui.util.toDateString(d.addTime, "yyyy-MM-dd") }}</div>'}
                        ,{field:'planTravelDate', title:'出差时间', minWidth:250, edit: 'text', templet:'<div>{{ layui.util.toDateString(d.planTravelDate, "yyyy-MM-dd") }}——{{ layui.util.toDateString(d.planEndDate, "yyyy-MM-dd") }}</div>'}
                        ,{field:'supplierName', title:'客户',  sort: true,  templet: '<div>{{d.supplier.name}}</div>'}
                        ,{field:'staffName', title:'申请人',  sort: true,  templet:'<div>{{d.staff.name}}</div>'}
                        ,{field:'travelNumber', title:'随行人数'}
                        ,{field:'status', title:'状态',  }
                        ,{field:'planMoney', title:'计划金额'}
                        ,{fixed: 'right', title:'操作',minWidth:200, toolbar: '#barDemo'}
                    ]
                ]
            });
            //条件查询
            $('#searchBtn').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            $('#searchwill').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : 3,
                        supplierName : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            $('#searchdoing').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : 1,
                        supplierName : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            $('#searchdone').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : 2,
                        supplierName : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            $('#reset').on('click', function() {
                window.location.reload();
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        node : null,
                        supplierName : null,
                        planTravelDate : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            $('#searchinweek').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                        planTravelDate : '1990-1-1',
                        node : null,
                        supplierName : null
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'goApplicationTemplate':
                        window.location = '/business-trip/application';
                };
            });


            //监听工具条 'tool(test)'要手动修改 tool是和  test是和table的lay-filter属性绑定
            table.on('tool(test)', function(obj){ var data = obj.data;
                if(obj.event === 'edit'){
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    parent.layer.open({
                        title:'出差申请',
                        type:2,
                        content:'/business-trip/applicationDetails?id='+data.id,
                        area: ['1200px', '600px'],
                        btn:['驳回','通过'],
                        end:function(){window.location.reload()},
                        yes:function(index, layero){
                            if(data.state==0){
                                parent.layer.closeAll();
                                parent.layer.msg("您已审批过");
                            }
                            else{
                                parent.layer.prompt({
                                    formType: 2,
                                    value: '',
                                    title: '请输入驳回原因',
                                    btn:['确定','返回'],
                                    area: ['600px', '250px'],
                                    zIndex: layer.zIndex,
                                    yes:function(index, layero) {
                                        var value = layero.find(".layui-layer-input").val();
                                        if (value == ""){
                                            parent.layer.msg("请输入驳回原因")
                                        } else {
                                            $.ajax({
                                                url:'/approve/saveTheApprovalForm',
                                                data:{"id":data.id,"node":data.processNode.node,"value":value,"state":0},
                                            })
                                            parent.layer.closeAll();

                                            parent.layer.msg("驳回申请");

                                        }

                                    }
                                }, );
                            }

                        },
                        btn2:function(index, layero){
                            if(data.state==0){
                                parent.layer.closeAll();
                                parent.layer.msg("您已审批过");
                            }
                            else{
                                $.ajax({
                                    url:'/approve/approvalForm',
                                    data:{"id":data.id,"node":data.processNode.node,},
                                })


                                layer.msg("通过申请");
                            }


                        },
                        shade: [0.3, '#393D49'],
                        shadeClose:false,
                        moveOut:true,
                    })
                }else if(obj.event === 'by'){
                    if(data.state==0){
                    parent.layer.closeAll();
                    parent.layer.msg("您已审批过");
                }
                else{
                    $.ajax({
                        url:'/approve/approvalForm',
                        data:{"id":data.id,"node":data.processNode.node,},
                    })


                    layer.msg("通过申请");
                        window.location.href;
                }

                }
                else if(obj.event === 'turnDown'){
                    if(data.state==0){
                        parent.layer.closeAll();
                        parent.layer.msg("您已审批过");
                    }
                    else{
                        parent.layer.prompt({
                            formType: 2,
                            value: '',
                            title: '请输入驳回原因',
                            btn:['确定','返回'],
                            area: ['600px', '250px'],
                            zIndex: layer.zIndex,
                            yes:function(index, layero) {
                                var value = layero.find(".layui-layer-input").val();
                                if (value == ""){
                                    parent.layer.msg("请输入驳回原因")
                                } else {
                                    $.ajax({
                                        url:'/approve/saveTheApprovalForm',
                                        data:{"id":data.id,"node":data.processNode.node,"value":value,"state":0},
                                    })
                                    parent.layer.closeAll();

                                    parent.layer.msg("驳回申请");
                                    window.location.href;

                                }

                            }
                        }, );
                    }

                }
            });


        });
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month
                + seperator1 + strDate + " " + date.getHours() + seperator2
                + date.getMinutes() + seperator2 + date.getSeconds();
            return currentdate;
        }
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>
        {{# if(d.processNode.node === 1 | d.processNode.node === 2 | d.processNode.node === 3 ){ }}
        <a class="layui-btn layui-btn-xs" lay-event="by">通过</a>
        {{# } }}
        {{# if(d.processNode.node === 1 | d.processNode.node === 2 | d.processNode.node === 3 ){ }}
        <a class="layui-btn layui-btn-xs" lay-event="turnDown">驳回</a>
        {{# } }}
    </script>

</head>
<body>
<form>
    <!--        搜索客户：-->
    <!--        <div class="layui-inline">-->
    <!--            <input class="layui-input" name="id" id="demoReload" autocomplete="off">-->
    <!--        </div>-->
    时间:
    <div class="layui-input-inline">
        <input type="text" th:autocomplete="off"  name="beginDate" id="begin-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
    </div> ——
    <div class="layui-input-inline">
        <input type="text" th:autocomplete="off"  name="endDate" id="end-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
    </div>
    <button class="layui-btn" id="searchBtn">搜索</button>
    <button class="layui-btn" id="searchwill">经理审批</button>
    <button class="layui-btn" id="searchdoing">部门审批</button>
    <button class="layui-btn" id="searchdone">运营审批</button>
    <button class="layui-btn" id="searchinweek">查看本周</button>
    <button class="layui-btn" type="reset" id="reset">重置</button>
</form>

<table class="layui-hide" id="test" lay-filter="test"></table>
</body>
</html>